<template>
	<view>
		<!-- <view class="example-info">卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。</view> -->
		<view class="example-title">{{plant.name}}—{{kind.name}}</view>
		<view class="example-body">
			<view class="example-box">
				<uni-card :title="null" :is-shadow="true" :note="null" :extra="null" :thumbnail="null">{{ getInfo() }}</uni-card>				
			</view>
			<view class="example-box">
				<uni-card :title="null" :is-shadow="true" :note="null" :extra="null" :thumbnail="null">{{ getPlantInfo() }}</uni-card>				
			</view>
			<view class="example-box">
				<uni-card title="形态" :is-shadow="true" :note="null" :extra="null" :thumbnail="null">{{ plant.morphology }}</uni-card>				
			</view>
			<view class="example-box">
				<uni-card title="习性" :is-shadow="true" :note="null" :extra="null" :thumbnail="null">{{ plant.habit }}</uni-card>				
			</view>
			<view class="example-box">
				<uni-card title="用途" :is-shadow="true" :note="null" :extra="null" :thumbnail="null">{{ plant.purpose }}</uni-card>				
			</view>
			<!-- <view v-for="item in list" :key="item.id" class="example-box">
				<uni-card :title="item.title" :is-shadow="item.shadow" :note="item.note" :extra="item.extra" :thumbnail="item.thumbnail" @click="clickCard">{{ item.content }}</uni-card>
			</view> -->
		</view>
		<!-- <view class="example-title">图文卡片</view>
		<view class="example-body">
			<view class="example-box">
				<uni-card :is-shadow="true" title="最美的风景" mode="style" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg" extra="DCloud 2019-05-20 12:32:19" note="true" @click="clickCard">
					<view>
						uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。 即使不跨端，uni-app同时也是更好的小程序开发框架
					</view>
					<template v-slot:footer>
						<view class="footer-box">
							<view class="footer-box__item" @click.stop="footerClick('喜欢')"><text> 喜欢</text></view>
							<view class="footer-box__item" @click.stop="footerClick('评论')"><text> 评论</text></view>
							<view class="footer-box__item" @click.stop="footerClick('分享')"><text> 收藏</text></view>
						</view>
					</template>
				</uni-card>
			</view>
			<view class="example-box">
				<uni-card :is-shadow="true" title="DCloud" mode="title" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="技术没有上限" note="true" @click="clickCard">
					<view>
						<view class="image-box">
							<image class="image" mode="aspectFill" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" />
						</view>
						<view class="content-box">
							uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。 即使不跨端，uni-app同时也是更好的小程序开发框架。
						</view>
					</view>
					<template v-slot:footer>
						<view class="footer-box">
							<view class="footer-box__item" @click.stop="footerClick('喜欢')"><text> 喜欢</text></view>
							<view class="footer-box__item" @click.stop="footerClick('评论')"><text> 评论</text></view>
							<view class="footer-box__item" @click.stop="footerClick('分享')"><text> 收藏</text></view>
						</view>
					</template>
				</uni-card>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	export default {
		components: {
			uniCard
		},
		data() {
			return {
				info:{},
				tree:{},
				kind:{},
				plant:{},
				
				// list: [{
				// 	id: 0,
				// 	title: '',
				// 	content: '这是一个基础卡片示例，内容较少，此示例不带边框阴影。',
				// 	shadow: false,
				// 	note: '',
				// 	extra: '',
				// 	thumbnail: ''
				// }, {
				// 	id: 1,
				// 	title: '标题文字',
				// 	content: '这是一个基础卡片示例，内容比较多，内容样式可自定义，卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、时间等，此示例带边框阴影。',
				// 	shadow: true,
				// 	note: '',
				// 	extra: '额外信息',
				// 	thumbnail: ''
				// }, {
				// 	id: 2,
				// 	title: '标题文字',
				// 	content: '这是一个带标题，带底部选项按钮的基础卡片示例，内容样式可自定义。',
				// 	shadow: true,
				// 	note: 'Tips',
				// 	extra: '额外信息',
				// 	thumbnail: ''
				// }, {
				// 	id: 3,
				// 	title: '标题文字',
				// 	content: '这是一个完整配置的基础卡片示例。内容样式可自定义。',
				// 	shadow: true,
				// 	note: 'Tips',
				// 	extra: '额外信息',
				// 	thumbnail: 'https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png'
				// }],
				// Tips: ['喜欢', '评论', '分享']
			}
		},
		async onLoad(options) {
			let info = JSON.parse(options.info)
			this.info = info;
			console.log(info)
			// 加载植物信息
			const { id } = info;
			let list = await this.$apis.list.findById(id);
			this.tree = list.data;
			this.kind = list.data.kind;
			this.plant = list.data.plant;
			console.log('当前植物信息',list.data);
		},
		methods: {
			clickCard() {
				uni.showToast({
					title: '点击卡片',
					icon: 'none'
				})
			},
			footerClick(types) {
				uni.showToast({
					title: types,
					icon: 'none'
				})
			},
			// 获取植物粗略信息
			getInfo(){
				const { id,card,x,y,height,lon,lat } = this.tree;
				return `
					植物编号：${id},
					树牌编号：${card},
					位置经度：${x},
					位置纬度：${x},
					位置高程：${height},
					lon：${lon},
					lat：${lat}
				`
			},
			// 获取植物详细信息
			getPlantInfo(){
				const { name,academic,alias,latin,family,genera,specie } = this.plant;
				return `
					学名：${academic},
					别名：${alias},
					拉丁名：${latin},
					科：${family},
					属：${genera},
					种：${specie}
				`
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: white
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: #464e52;
		padding: 30upx 30upx 30upx 50upx;
		position: relative;
		background-color: #fdfdfd;
		border-bottom: 1px #f5f5f5 solid
	}
	.example-title__after {
		position: relative;
		color: #031e3c
	}

	.example-title:after {
		content: '';
		position: absolute;
		left: 30upx;
		margin: auto;
		top: 0;
		bottom: 0;
		width: 6upx;
		height: 32upx;
		background-color: #ccc
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 10upx;
		background: #fff
	}

	.example-info {
		padding: 30upx;
		color: #3b4144;
		background: #fff
	}

	.example-body {
		padding: 30upx 0;
	}

	.example-box {
		margin-bottom: 30upx;
	}

	.example-box:last-child {
		margin-bottom: 0;
	}

	.image-box {
		width: 100%;
		height: 350upx;
		overflow: hidden;
	}

	.image-box .image {
		width: 100%;
		height: 100%;
	}

	.content-box {
		padding-top: 20upx;
	}

	.footer-box {
		display: flex;
		justify-content: space-between;
		width: 100%;

	}

	.footer-box__item {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.footer-box__item:nth-child(2) {
		justify-content: center;
	}

	.footer-box__item:last-child {
		justify-content: flex-end;
	}
</style>